<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .wrap {
      width: 800px;
      margin: 20px auto;
    }

    .list {
      width: 800px;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
    }

    .list_one {
      width: 180px;
      margin-top: 20px;
      text-align: center;

    }

    #mytable {
      width: 800px;
      text-align: center;
      margin-top: 20px;
    }

    #mytable tr td:nth-child(1) {
      width: 180px;
      background: #10aeb5;
    }

    #mytable tr {
      position: relative;
    }

    #mytable tr td {
      margin-top: 10px;
      height: 20px;
      line-height: 20px;

    }

    table tr td ul {
      width: 800px;
      /* display: flex; */
      /* justify-content: space-around; */

    }

    table tr td ul li {}

    /* table tr td:last-child {
      position: absolute;
      width: 800px;
      left: 0;
      top: 0;
    } */

    table tr td li {
      width: 800px;
      list-style: none;
      display: flex;
      justify-content: space-around;
    }

    #proBody {
      height: 900px;
    }

    /* .cityBody tr td:nth-child(1) {
      background: white !important;
    } */

    .cityName {
      background: white !important;
    }

    .cityBody {
      /* display: none !important; */
    }
  </style>
</head>

<body>
  <div class="wrap">
    <h1>疫情实时大数据报告</h1>
    <div class="now_data">
      <h3>国内疫情</h3>
      <h2 class="nowTime">数据更新至 2021.05.17 09:07</h2>
      <div class="list">
        <!-- <div class="list_one">
          <h4>现有确诊</h4>
          <span>989</span>
          <h5>昨日+8</h5>
        </div>
        <div class="list_one">
          <h4>无症状</h4>
          <span>989</span>
          <h5>昨日+8</h5>
        </div>
        <div class="list_one">
          <h4>现有疑似</h4>
          <span>989</span>
          <h5>昨日+8</h5>
        </div>
        <div class="list_one">
          <h4>现有重症</h4>
          <span>989</span>
          <h5>昨日+8</h5>
        </div>
        <div class="list_one">
          <h4>累计确诊</h4>
          <span>989</span>
          <h5>昨日+8</h5>
        </div>
        <div class="list_one">
          <h4>境外输入</h4>
          <span>989</span>
          <h5>昨日+8</h5>
        </div>
        <div class="list_one">
          <h4>累计治愈</h4>
          <span>989</span>
          <h5>昨日+8</h5>
        </div>
        <div class="list_one">
          <h4>累计死亡</h4>
          <span>989</span>
          <h5>昨日+8</h5>
        </div> -->
      </div>
    </div>
    <!-- 城市疫情详细数据 -->

    <div class="city_list">
      <table id="mytable">
        <thead>
          <tr>
            <th>地区</th>
            <th>新增</th>
            <th>现有</th>
            <th>累计</th>
            <th>治愈</th>
            <th>死亡</th>
          </tr>
        </thead>
        <tbody id="proBody">
          <tr>
            <td>地区</td>
            <td>新增</td>
            <td>疑似</td>
            <td>累计</td>
            <td>治愈</td>
            <td>死亡</td>
            <td>
              <ul class="cityBody">
                <li>地区</li>
                <li>新增</li>
                <li>疑似</li>
                <li>累计</li>
                <li>治愈</li>
                <li>死亡</li>
              </ul>
            </td>
          </tr>

      </table>
    </div>
  </div>
  <table>
    <tbody id="ccc"></tbody>
  </table>
  <script src="./jquery-3.4.1.min.js"></script>
  <script>
    function loadData() {
      $.ajax({
        url: "http://route.showapi.com/2217-2",
        type: "get",
        data: {
          showapi_appid: "636284",
          showapi_sign: "5f73240ec17c419b997203cbb2ba6cb4"
        },
        success: function (res) {
          console.log(res)
          var today = res.showapi_res_body.todayStatictic;
          var updateTime = res.showapi_res_body.updateTime;//更新时间
          $(".nowTime").html(updateTime)
          console.log(today)
          // 渲染今日数据部分--------------------------------------------------
          var str = ` <div class="list_one">
                  <h4>现有确诊</h4>
                  <span class="noe">${today.confirmedNum}</span>
                  <h5>昨日+8</h5>
                </div>
                <div class="list_one">
                  <h4>无症状</h4>
                  <span>${today.asymptomaticNum}</span>
                  <h5>昨日+8</h5>
                </div>
                <div class="list_one">
                  <h4>现有疑似</h4>
                  <span>${today.suspectedNum == -1 ? '0' : today.suspectedNum}</span>
                  <h5>昨日+8</h5>
                </div>
                <div class="list_one">
                  <h4>现有重症</h4>
                  <span>${today.seriousNum == -1 ? "0" : today.seriousNum}</span>
                  <h5>昨日+8</h5>
                </div>
                <div class="list_one">
                  <h4>累计确诊</h4>
                  <span>${today.confirmedNum + today.curedNum + today.deadNum}</span>
                  <h5>昨日+8</h5>
                </div>
                <div class="list_one">
                  <h4>境外输入</h4>
                  <span>${today.externalConfirmedNum}</span>
                  <h5>昨日+8</h5>
                </div>
                <div class="list_one">
                  <h4>累计治愈</h4>
                  <span>${today.curedNum}</span>
                  <h5>昨日+8</h5>
                </div>
                <div class="list_one">
                  <h4>累计死亡</h4>
                  <span>${today.deadNum}</span>
                  <h5>昨日+8</h5>
                </div>`
          $(".list").html(str)

          //渲染省市列表部分 -------------------------------------------------------
          var todayDetailList = res.showapi_res_body.todayDetailList;
          var mystr = ``;
          $.each(todayDetailList, function (index, ele) { //循环省的数据
            var cityStr = ``
            if (ele.cityList.length != 0) {
              // 提前生成好市的数据
              $.each(ele.cityList, function (ind, element) { //循环生成市
                cityStr += `<li><span class="cityName">${element.cityName}</span>
                  <span>0</span>
                  <span>${element.confirmedNum}</span>
                  <span>${element.curedNum}</span>
                  <span>${element.curedNum}</span>
                  <span>${element.curedNum}</span></li>`
              })
            }
            // 省的拼接
            mystr += ` <tr class="proTr" >  
                <td>${ele.provinceName}</td>
                <td>0</td>
                <td>${ele.suspectedNum}</td>
                <td>${ele.curedNum + ele.deadNum}</td>
                <td>${ele.curedNum}</td>
                <td>${ele.deadNum}</td>
                <td >  <ul class="cityBody">${cityStr}</ul></td>
              </tr>`
          })
          console.log(mystr)
          console.log($("#proBody"))
          $("#proBody").html(mystr)
        }
      })
    }
    // 
    $("#proBody").on("click", ".proTr", function () {
      $(this).next().toggle();
    })
    loadData()


  </script>
</body>

</html>